<template>
  <div v-loading="loading" class="wrap" element-loading-spinner="el-icon-loading" element-loading-text="等下,我正在请求">
    <basic-opt :has_left="true">
      <template #search>
        <div class="opt-item">
          <el-input v-model="search.uuid" class="w-ipt" placeholder="请输入设备号进行筛选" size="medium"
                    suffix-icon="el-icon-search" @keydown.enter="getSearchData">
          </el-input>
        </div>
        <div class="opt-item">
          <el-input v-model="search.address" class="w-ipt" placeholder="请输入地址名进行筛选"
                    size="medium" suffix-icon="el-icon-search" @keydown.enter="getSearchData">
          </el-input>
        </div>
        <div class="opt-item">
          <el-cascader v-model="pro_city_area" :options="cascader_data" :props="props" :show-all-levels="false"
                       class="w-ipt" placeholder="请选择省市区" size="medium" @change="areaChange">
          </el-cascader>
        </div>
        <div v-if="search.search_area_id" class="opt-item">
          <el-select v-model="search_name" :remote-method="addressChange" class="w-ipt" filterable placeholder="请选择地址"
                     remote size="medium" @change="addressIdChange">
            <el-option v-for="item in address_list" :key="item.id" :label="item.address" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="opt-item">
          <type-device :parent_type="search.type" @getType="typeChange"></type-device>
        </div>
        <div class="opt-item">
          <direction-component :direction_val="search.direction" @getDirectionId="directionChange">
          </direction-component>
        </div>
        <div class="opt-item">
          <el-button size="medium" @click="getSearchData">搜索</el-button>
        </div>
        <div class="opt-item">
          <reset-search></reset-search>
        </div>
      </template>
      <template #add>
        <div class="opt-item">
          <el-button icon="el-icon-circle-plus-outline" size="medium" type="primary" @click="addForm">添加设备
          </el-button>
        </div>
      </template>
    </basic-opt>

    <div class="table-box">
      <el-table :data="data" :header-cell-style="header_cell_style" :max-height="table_max_height" stripe>
        <el-table-column label="ID" prop="id" width="100px"></el-table-column>
        <el-table-column label="设备名称(状态)" prop="remark" width="300px">
          <template #default="scope">
            <div>
              <span>
                {{ scope.row.remark }}
              </span>
              <span v-if="scope.row.online == '1'" style="color: green;">(在线)</span>
              <span v-if="scope.row.online == '2'" style="color: red;">(离线)</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="最后登录时间" prop="last_login" width="150px"></el-table-column>
        <el-table-column label="地址" prop="address.address" width="200px"></el-table-column>
        <el-table-column label="uuid" prop="uuid" width="200px"></el-table-column>
        <el-table-column label="类型" prop="type" width="150px">
          <template #default="scope">
            <span v-show="scope.row.type == '0'">UNKNOWN</span>
            <span v-show="scope.row.type == '1'">自营人脸机</span>
            <span v-show="scope.row.type == '2'">DT-20</span>
            <span v-show="scope.row.type == '3'">度目摄像枪</span>
            <span v-show="scope.row.type == '4'">度目人脸机</span>
            <span v-show="scope.row.type == '5'">欧菲人脸机</span>
            <span v-show="scope.row.type == '6'">海飞人脸机</span>
            <span v-show="scope.row.type == '7'">海飞对比机</span>
          </template>
        </el-table-column>
        <el-table-column label="方向" prop="direction"></el-table-column>
        <el-table-column label="IP地址" prop="ip" width="150px"></el-table-column>
        <el-table-column label="版本" prop="version" width="250px"></el-table-column>
        <el-table-column label="备注" prop="remark" width="500px"></el-table-column>
        <el-table-column fixed="right" label="操作" width="300">
          <template #default="scope">
            <div class="showOperation">
              <el-button plain size="mini" type="success" @click="editDeviceData(scope.row)">编辑
              </el-button>
              <el-button plain size="mini" type="info" @click="viewFaceLogs(scope.row)">进出记录</el-button>
              <el-button plain size="mini" type="info" @click="moreOperation(scope.row)">更多操作</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <page-component @pageChanged="onPageChanged"></page-component>

    <!-- 添加设备 -->
    <compoment-drawer :drawer_form="drawer_form" :drawer_name="drawer_name" @getDrawerForm="getDrawerForm">
      <el-form ref="form" :model="form" label-width="120px">
        <el-scrollbar v-loading="form_loading" element-loading-spinner="el-icon-loading"
                      element-loading-text="正在进行请求,请稍后"
                      height="80vh">
          <div class="form-flex">
            <el-form-item label="设备名称" prop="remark">
              <el-input v-model="form.remark" class="w-ipt" placeholder="请输入设备名称"></el-input>
            </el-form-item>
            <el-form-item label="uuid" prop="uuid">
              <uuid-device :ban_edit="ban_edit_uuid" :uuid="form.uuid" @getUuid="getUuid">
              </uuid-device>
            </el-form-item>
            <el-form-item label="类型" prop="type">
              <type-device :parent_type="form.type" @getType="getType"></type-device>
            </el-form-item>
            <el-form-item label="方向" prop="direction">
              <direction-component :direction_val="form.direction" @getDirectionId="getDirectionId">
              </direction-component>
            </el-form-item>
            <el-form-item label="地址" prop="address_id">
              <address-device :address="address_name" @getAddresses="getAddress">
              </address-device>
            </el-form-item>
            <div v-if="form.address_id">
              <el-form-item label="选择人脸组">
                <el-checkbox v-model="check_all" @change="handleCheckAllChange">全选</el-checkbox>
                <el-checkbox-group v-model="form.groups" @change="checkOneChange">
                  <div v-for="(item,index) in face_group_list" :key="index">
                    <el-checkbox :label="item.group_name">
                      {{ item.group_name }}
                    </el-checkbox>
                  </div>
                </el-checkbox-group>
              </el-form-item>
            </div>
          </div>
        </el-scrollbar>
        <submit-reset @getChildNewForm="getNewForm" @getChildResetForm="resetForm('form')">
        </submit-reset>
      </el-form>
    </compoment-drawer>
  </div>
  <!--  mobile  -->
  <div v-loading="loading" class="mobile-wrap" element-loading-spinner="el-icon-loading"
       element-loading-text="等下,我正在请求">
    <div class="mobile-search-vertical">
      <el-input v-model="search.uuid" placeholder="请输入设备号进行筛选" size="medium"
                suffix-icon="el-icon-search" @keydown.enter="getSearchData">
      </el-input>
      <el-input v-model="search.address" placeholder="请输入地址名进行筛选"
                size="medium" suffix-icon="el-icon-search" @keydown.enter="getSearchData">
      </el-input>
      <el-button size="medium" @click="getSearchData">搜索</el-button>
    </div>
    <div class="moblie-table-box">
      <el-table :data="data" :header-cell-style="header_cell_style" :max-height="mobile_table_max_height" stripe>
        <el-table-column label="ID" prop="id" width="100px"></el-table-column>
        <el-table-column label="设备名称(状态)" prop="remark" width="300px">
          <template #default="scope">
            <div>
              <span>
                {{ scope.row.remark }}
              </span>
              <span v-if="scope.row.online == '1'" style="color: green;">(在线)</span>
              <span v-if="scope.row.online == '2'" style="color: red;">(离线)</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="最后登录时间" prop="last_login" width="150px"></el-table-column>
        <el-table-column label="地址" prop="address.address" width="200px"></el-table-column>
        <el-table-column label="uuid" prop="uuid" width="200px"></el-table-column>
        <el-table-column label="类型" prop="type" width="150px">
          <template #default="scope">
            <span v-show="scope.row.type == '0'">UNKNOWN</span>
            <span v-show="scope.row.type == '1'">自营人脸机</span>
            <span v-show="scope.row.type == '2'">DT-20</span>
            <span v-show="scope.row.type == '3'">度目摄像枪</span>
            <span v-show="scope.row.type == '4'">度目人脸机</span>
            <span v-show="scope.row.type == '5'">欧菲人脸机</span>
            <span v-show="scope.row.type == '6'">海飞人脸机</span>
            <span v-show="scope.row.type == '7'">海飞对比机</span>
          </template>
        </el-table-column>
        <el-table-column label="方向" prop="direction"></el-table-column>
        <el-table-column label="IP地址" prop="ip" width="150px"></el-table-column>
        <el-table-column label="版本" prop="version" width="250px"></el-table-column>
        <el-table-column label="备注" prop="remark" width="500px"></el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <div class="showOperation">
              <el-button plain size="mini" type="info" @click="viewFaceLogs(scope.row)">进出记录</el-button>
              <el-button plain size="mini" type="info" @click="moreOperation(scope.row)">更多操作</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <page-component @pageChanged="onPageChanged"></page-component>
  </div>
</template>

<script>
import API from '@/api/index.js'
import UuidDevice from '@/components/form/device/uuid-device.vue'
import TypeDevice from '@/components/form/device/type-device.vue'
import DirectionComponent from '@/components/form/direction-component.vue'
import AddressDevice from '@/components/form/device/address-device.vue'
import mixin from '@/mixin.js';
import {
  mapState
} from 'vuex'

export default {
  name: 'device',
  mixins: [mixin],
  components: {
    UuidDevice,
    TypeDevice,
    DirectionComponent,
    AddressDevice
  },
  data() {
    return {
      search: { // 搜索
        uuid: '',
        address: '',
        type: '',
        search_area_id: '', // 根据社区id搜索
        direction: '', // 根据方向选择
        address_id: '',
        addresses_id: []
      },
      pro_city_area: [], // 根据省市区搜索
      cascader_data: [],
      props: {
        label: 'title',
        value: 'id',
        checkStrictly: true,
      },
      search_name: '', // 搜索的名字
      address_list: [],
      address_area_id: [],

      // 表单
      drawer_name: '添加设备',
      form_loading: false, // 表单填写时加载
      form: {
        address_id: '',
        uuid: '',
        type: '',
        remark: '', // 设备名称
        direction: '',
        groups: []
      },
      check_all: false, // 人脸组全选
      face_group_list: [], // 人脸组
      address_name: '', // 地址名称
      ban_edit_uuid: false, // 禁止修改UUid
    }
  },
  computed: {
    ...mapState({
      routeName: 'current_route',
    })
  },
  watch: {
    openSearch: { // 监听器
      deep: true,
      handler(val) {
        if (!val) {
          this.search = { // 搜索
            uuid: '',
            address: '',
            type: '',
            search_area_id: '', // 根据社区id搜索
            direction: '', // 根据方向选择
            address_id: '',
            addresses_id: []
          }
          this.getData();
        }
      }
    }
  },
  mounted() {
    this.getData();
    this.getProArae(); // 省市区数据
  },
  methods: {
    async getData() {
      let self = this;
      self.loading = true;
      try {
        let params = {
          format: 1,
          area_id: self.search.search_area_id ? self.search.search_area_id : '0',
          uuid: self.search.uuid ? self.search.uuid : '',
          address: self.search.address ? self.search.address : '',
          direction: self.search.direction ? self.search.direction : '',
          type: self.search.type ? self.search.type : '',
          address_id: self.search.address_id ? self.search.address_id : '0',
          addresses_id: self.search.addresses_id.length > 0 ? self.search.addresses_id : '0',
        }
        self.addPageInfo(params)
        let res = await API.devices(params.pageNumber, params.pageSize, params.format, params.area_id,
            params
                .uuid, params.address, params.direction, params.type, params.address_id, params
                .addresses_id)
        self.loading = false;
        self.onGotPageData(res)
      } catch (err) {
        self.loading = false;
      }
    },

    // 获取社区列表（省市区选中）
    getProArae() {
      let self = this;
      API.areas(1, 100, 0).then(res => {
        self.cascader_data = res.data.data;
      })
    },
    // 搜索
    areaChange(val) {
      let self = this;
      self.search.search_area_id = val[val.length - 1];
      self.address_area_id = val;
      console.log(self.search.search_area_id)
      self.getSearchData();
      self.addressChange();
    },
    // 地址搜素
    addressChange(val) {
      let self = this;
      self.search_name = val;
      console.log(111, self.address_area_id)
      API.searchAddresses(self.address_area_id, 0, self.search_name).then(res => {
        let data = res.data;
        self.$notify({
          message: '搜索成功'
        });
        self.address_list = [];
        data.data.map(item => {
          self.address_list.push({
            id: item.id,
            address: item.address
          })
        })
        return self.address_list;
      }).catch(err => {
        self.$message.error(err.response.data.message)
      });
    },
    addressIdChange(val) {
      let self = this;
      self.search.address_id = val;
      self.getSearchData();
    },
    // 类型搜索
    typeChange(val) {
      let self = this;
      self.search.type = val.type;
      console.log(self.search.type)
      self.getSearchData();
    },
    // 方向搜索
    directionChange(val) {
      let self = this;
      self.search.direction = val.direction_val;
      console.log(self.search.type)
      self.getSearchData();
    },
    // 编辑数据
    editDeviceData(row) {
      let self = this;
      self.drawer_form = true;
      self.ban_edit_uuid = true;
      console.log(row)
      let new_groups = [];
      row.groups.forEach(item => {
        new_groups.push(item.group_name)
      })
      self.form = {
        id: row.id,
        address_id: row.address_id,
        uuid: row.uuid,
        type: row.type,
        remark: row.remark, // 设备名称
        direction: row.direction,
        groups: new_groups
      };
      self.address_name = row.address.address;
      API.addressGroups(row.address_id).then(res => {
        let data = res.data.data;
        self.face_group_list = data;
        self.form.groups.length == self.face_group_list.length ? self.check_all = true : self.check_all =
            false;
        console.log(self.form.groups.length == self.face_group_list.length)
      })

    },
    // 获取uuid
    getUuid(data) {
      let self = this;
      self.form.uuid = data.uuid;
      console.log(self.form.uuid)
    },
    // 获取类型
    getType(data) {
      let self = this;
      self.form.type = data.type;
    },
    // 获取方向
    getDirectionId(data) {
      let self = this;
      self.form.direction = data.direction_val;
    },
    // 获取地址
    getAddress(data) {
      let self = this;
      self.form.address_id = data.address_id;
      self.face_group_list = [];
      self.form.groups = [];
      // 获取人脸组
      API.addressGroups(self.form.address_id).then(res => {
        let data = res.data.data;
        self.face_group_list = data;
      })
    },
    // 全选
    handleCheckAllChange(val) {
      let self = this;
      let facebox = [];
      if (val === true) {
        self.face_group_list.forEach(item => {
          facebox.push(item.group_name)
        })
        self.form.groups = facebox;
      } else if (val === false) {
        self.form.groups = [{}];
        console.log(self.form.groups)
      }
    },
    // 单选
    checkOneChange(val) {
      let self = this;
      let checked_count = val.length;
      self.check_all = checked_count === self.face_group_list.length;
    },
    // 提交表单
    getNewForm() {
      let self = this;
      self.form_loading = true;
      API.device(self.form).then(res => {
        console.log(res)
        self.submitSuccess();
        self.drawer_form = false;
        self.form_loading = false;
        self.getData();
        self.initForm();
      }).catch(err => {
        self.form_loading = false;
        self.$message.error(err.response.data.message);
      });
    },
    initForm() {
      let self = this;
      self.address_name = ' ';
      self.form = {
        address_id: '',
        uuid: ' ',
        type: '',
        remark: '', // 设备名称
        direction: '',
        groups: []
      };
    },
    // 查看进出记录
    viewFaceLogs(row) {
      let self = this;
      localStorage.setItem('device_uuid', row.uuid);
      self.$router.replace({
        path: '/outInLogs',
        query: {
          uuid: row.uuid
        }
      });
    },
    // 更多操作
    moreOperation(row) {
      let self = this;
      localStorage.setItem('device_id', row.id)
      localStorage.setItem('device_type', row.type)
      localStorage.setItem('device_uuid', row.uuid)
      self.$router.replace({
        path: '/device-operation',
        query: {
          id: row.id,
          type: row.type,
          uuid: row.uuid
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
